<template>
  <div class="HealthPage">
    <van-sticky>
      <van-nav-bar title="健康服务" />
    </van-sticky>
    <div class="HealthyHeader">
      <img src="../../img/HealthyHeader.png" alt="" @click="goscreen"/>
      <img src="../../img//HealthyAI.png" alt="" />
    </div>
    <div class="HealthyMain">
      <dl @click="xq">
        <dt>
          <img src="../../img/HealthyMainRecorder.png" alt="" />
        </dt>
        <dd>健康记录仪</dd>
      </dl>
      <dl>
        <dt>
          <img src="../../img/HealthyMainTime.png" alt="" />
        </dt>
        <dd>用药提醒</dd>
      </dl>
      <dl>
        <dt>
          <img src="../../img/HealthyMainBook.png" alt="" />
        </dt>
        <dd>医学百科</dd>
      </dl>
      <dl>
        <dt>
          <img src="../../img/HealthyMainTelephone.png" alt="" />
        </dt>
        <dd>疾病自查</dd>
      </dl>
    </div>
    <div class="Healthy-box">
      <div
        style="
          font-size: 14px;
          font-weight: 600;
          margin-top: 0.2rem;
          padding-left: 0.1rem;
          padding-top: 0.1rem;
          margin-top: 0.2rem;
          background: linear-gradient(#e3ebff, #f6faff);
          height: 0.3rem;
          border-radius: 0.1rem;
        "
      >
        记录多一点,健康多一点,快点击下面记录吧~
      </div>
      <h2 style="padding-left: 0.1rem">健康档案</h2>
      <span style="position: absolute; right: 0.1rem; top: 0.6rem"
        >同步华为运动健康数据</span
      >
      <div class="Healthy-box-main">
        <div>
          <h3>步数</h3>
          <span style="display: block">您还没有记录</span>
          <van-button plain round type="primary" size="small"
            ><b>去记录</b></van-button
          >
        </div>
        <div>
          <h3>体温</h3>
          <span style="display: block">您还没有记录</span>
          <van-button plain round type="primary" size="small"
            ><b>去记录</b></van-button
          >
        </div>
      </div>
      <h3
        style="
          background-color: #f5f9ff;
          border-radius: 0.1rem;
          width: 92%;
          height: 0.35rem;
          line-height: 0.35rem;
          padding-left: 0.1rem;
          margin-left: 0.1rem;
          margin-top: 0.1rem;
        "
      >
        历史记录
      </h3>
    </div>
    <div class="Healthy-box-tow">
      <h2 style="padding-left: 0.1rem; padding-top: 0.1rem;margin-bottom: 0.1rem;">健康评估</h2>
      <span class="Healthy-box-tow-span" @click="gofitness">更多></span>
      <div class="Healthy-box-tow-box-one">
        <h3>甲状腺癌</h3>
        <span>甲状腺癌风险评估</span>
        <van-button
          style="position: absolute; right: 0.1rem; top: 0.3rem"
          color="#17a8bb"
          round
          size="small"
          ><b>去评估</b></van-button
        >
      </div>
      <div class="Healthy-box-tow-box-two">
        <div class="Healthy-box-tow-box-two-box1">
          <h3>乳腺癌</h3>
          <span style="display: block">乳腺癌风险评估</span>
          <van-button
            style="position: absolute; bottom: 10px"
            color="#ff6672"
            round
            type="primary"
            size="small"
            ><b>去评估</b></van-button
          >
        </div>
        <div class="Healthy-box-tow-box-two-box2">
          <h3>肺癌</h3>
          <span style="display: block">肺癌风险评估</span>
          <van-button
            style="position: absolute; bottom: 10px"
            color="#4c8dfc"
            round
            size="small"
            ><b>去评估</b></van-button
          >
        </div>
      </div>
    </div>
    <div class="Healthy-box-three">
      <p style="font-size: 0.2rem; padding-left: 0.1rem;margin-top: 0.2rem;margin-bottom: 0.1rem;">健康科普</p>
      <span style="position: absolute; right: 0.15rem; top: 0.02rem">更多></span>
      <van-tabs v-model:active="active" @click-tab="onChange(active)" background="#f5f6f7" line-height="0">
        <van-tab v-for="item in HealthPageTiter" :key="item.id" :title="item">
          <div
            class="ListData"
            v-for="(item, index) in HealthPageData"
            :key="index"
            @click="JumpThirdClass"
          >
            <div class="ListHeader">
              <div class="ListHeaderImg">
                <img :src="item.img" alt="" />
              </div>
              <p style="font-size: 0.2rem">{{ item.name }}</p>
              <span style="position: absolute; top: 0.15rem; left: 1.3rem;color: #b5b4b5;">{{
                item.state
              }}</span>
              <span style="display: inline-block;color: #b5b4b5;line-height: 0.4rem;">{{ item.time }}</span>
            </div>
            <div class="ListBox">
              <p>{{ item.title }}</p>
              <van-text-ellipsis style="padding-left: 0.1rem;color: #b5b4b5;" :content="item.content" />
            </div>
            <div class="ListFooter">
              <p>#{{ item.department }}</p>
              <span>点赞{{ item.interrogation }}</span>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import instance from '../axios/index.ts';
import { useRouter } from "vue-router";
import { useCounterStore } from "../pinia/index.ts"; //引入pinia
const store = useCounterStore();
const router = useRouter();
const gofitness = () => {
  router.push("/fitness");
}
const goscreen = () => {
  router.push("/screen");
}

const page = ref(1);
const pageSize = ref(10);
const loading = ref(false);
const finished = ref(false);
const HealthPageData = ref([]);
const HealthPageTiter = ref([]);
const active = ref(0);
let newtitle = ref([]);
const newpifu = ref([]);
let newarr = [];

// 获取头部渲染
instance.post("/api/homeall").then((res) => {
  let shuju = res.data.data;
  shuju.forEach((item) => {
    newtitle.value.push(item.department);
  });
  HealthPageTiter.value = newtitle.value.filter(
    (element, index) => newtitle.value.indexOf(element) === index //循环去重
  );
});

// 渲染
const getData = async () => {
  page.value += 1;
  setTimeout(() => {
    instance.post("/api/homeall").then((res) => {
      newarr = res.data.data.splice(page.value * pageSize.value, 10);
      HealthPageData.value = [...HealthPageData.value, ...newarr];
    });
    loading.value = false;
    if (HealthPageData.value >= 500) {
      finished.value = true;
    }
  }, 1000);
};
getData();

// 点击事件
const onChange = (active) => {
  newpifu.value = [];
  instance.post("/api/homeall").then((res) => {
    let shuju = res.data.data;
    shuju.map((item) => {
      if (item.department === HealthPageTiter.value[active]) {
        //所有数据循环判断类型
        newpifu.value.push(item);
      }
    });
    newarr = newpifu.value.splice(page.value * pageSize.value, 10);
    HealthPageData.value = newarr;
  });
};

const JumpThirdClass = () => {
  router.push("/thirdclass");
};

</script>

<style scoped>
.HealthPage {
  background-color: #f5f6f7;
}
.HealthyHeader {
  width: 100%;
}
.HealthyHeader img {
  width: 100%;
}
.HealthyMain {
  width: 100%;
  height: 0.8rem;
  margin-top: 0.15rem;
  display: flex;
}
.HealthyMain dl {
  width: 100%;
  height: 100%;
  text-align: center;
}
.HealthyMain dl dt {
  width: 100%;
}
.HealthyMain dl dd {
  margin-inline-start: 0;
}
.Healthy-box {
  width: 94%;
  height: 3rem;
  margin-left: 0.1rem;
  border-radius: 0.1rem;
  background-color: #fff;
  margin-bottom: 0.1rem;
  position: relative;
}
.Healthy-box h2 {
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
}
.Healthy-box-main {
  height: 1.3rem;
  display: flex;
}
.Healthy-box-main h3 {
  margin-block-start: 1em;
  margin-block-end: 1em;
}
.Healthy-box-main div {
  background-color: #f5f9ff;
  margin-left: 0.1rem;
  padding-left: 0.1rem;
  width: 43%;
}
.Healthy-box-tow {
  width: 94%;
  height: 3.35rem;
  margin-left: 0.1rem;
  border-radius: 0.1rem;
  background-color: #fff;
  position: relative;
}
.Healthy-box-tow h3 {
  margin-block-start: 1em;
  margin-block-end: 1em;
}
.Healthy-box-tow-span {
  position: absolute;
  right: 0.1rem;
  top: 0.15rem;
}
.Healthy-box-tow-box-one {
  width: 92%;
  margin-left: 0.1rem;
  padding-top: 0.01rem;
  padding-left: 0.1rem;
  margin-bottom: 0.1rem;
  height: 1rem;
  background: linear-gradient(#d5ecf5, #f1f7ff);
  position: relative;
  border-radius: 0.2rem;
}
.Healthy-box-tow-box-two {
  display: flex;
}
.Healthy-box-tow-box-two-box1 {
  height: 1.5rem;
  background: linear-gradient(#ffe8ed, #f7f2f6);
  width: 42%;
  padding-left: 0.1rem;
  border-radius: 20px;
  margin-left: 0.1rem;
  position: relative;
}
.Healthy-box-tow-box-two-box2 {
  padding-left: 0.1rem;
  height: 1.5rem;
  background: linear-gradient(#dbeaff, #f1f7ff);
  width: 42%;
  margin-left: 0.2rem;
  border-radius: 0.2rem;
  position: relative;
}
.Healthy-box-three {
  width: 100%;
  height: 9rem;
  position: relative;
}
.ListData {
  width: 95%;
  height: 1.8rem;
  border-radius: 0.1rem;
  background-color: #fff;
  margin: 0.1rem;
}
.ListHeader {
  height: 39%;
  padding-top: 0.1rem;
  padding-left: 0.1rem;
  position: relative;
}
.ListBox p {
  font-size:0.2rem;
  padding-left: 0.1rem;
  margin-block-start: 0;
  margin-block-end: 0.1rem;
}
.ListHeaderImg {
  width: 0.54rem;
  height: 0.54rem;
  margin-right: 0.1rem;
  border-radius: 50%;
  overflow: hidden;
  float: left;
  background-color: yellow;
}
.ListHeaderImg img {
  width: 100%;
  height: 100%;
}
.ListHeader p {
  margin-block-start: 0;
  margin-block-end: 0;
}
.ListFooter {
  position: relative;
}
.ListFooter p {
  position: absolute;
  color: #3f95ff;
  left: 0.15rem;
}
.ListFooter span {
  position: absolute;
  top: 0rem;
  right: 0.1rem;
  color: #b5b4b5;
}
/* .van-tabs__wrap{
  background-color: #ccc !important;
} */
</style>
 
